docs: add `CSS Theme Variables` and `Shadow DOM` pages #950

cheton · 2024-12-01T14:40:35Z

User description

Demo:

Description

Added a new "Customization" section in the documentation sidebar, including a route for "Shadow DOM".
Updated the theme configuration to include CSS variable settings with a root selector and prefix.
Enabled future state preservation for InstantSearch to maintain widget states.
Implemented a Shadow DOM example with a modal component using Emotion Cache and Tonic UI.
Created a new Markdown page for "Shadow DOM" customization, rendering the Shadow DOM component.

Changes walkthrough 📝

Relevant files

Documentation

sidebar-routes.js `Add Customization Section with Shadow DOM Route` packages/react-docs/config/sidebar-routes.js Added a new "Customization" section to the sidebar. Included a route for "Shadow DOM" under the "Customization" section.	+10/-0
shadow-dom.page.mdx `Create Shadow DOM Customization Page` packages/react-docs/pages/customization/shadow-dom.page.mdx Created a new page for "Shadow DOM" customization. Rendered the Shadow DOM component.	+3/-0

Enhancement

_app.page.js `Update Theme Configuration and InstantSearch State` packages/react-docs/pages/_app.page.js Updated CSS variable configuration with a root selector and prefix. Enabled future state preservation for InstantSearch.	+10/-1
index.page.js `Redirect to Shadow DOM Customization Page` packages/react-docs/pages/customization/index.page.js Added a redirect to the "Shadow DOM" page.	+14/-0
shadow-dom.js `Implement Shadow DOM Example with Modal` packages/react-docs/pages/customization/shadow-dom.js Implemented a Shadow DOM example with a modal component. Utilized Emotion Cache and Tonic UI for styling.	+176/-0

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

PR Type

Documentation, Enhancement

Description

Added a new "Customization" section in the documentation sidebar with routes for "CSS Theme Variables" and "Shadow DOM".
Implemented Shadow DOM integration with Emotion Cache, providing examples for Drawer, Modal, and Toast components.
Updated theme configuration to include CSS variable settings with a root selector and prefix.
Enhanced the Popper component by using the useDefaultProps hook for managing default props.
Added comprehensive documentation for CSS theme variables and Shadow DOM integration.

Changes walkthrough 📝

Relevant files

Enhancement

5 files

MDXComponents.js `Refactor BlockquoteComponent and remove styled-components` packages/react-docs/components/MDXComponents.js Removed `styled` import from Emotion. Refactored `BlockquoteComponent` to remove styled-components usage. Adjusted styles for `BlockquoteComponent` using `sx` prop.	+8/-8
_app.page.js `Update Theme and InstantSearch Configuration` packages/react-docs/pages/_app.page.js Updated Emotion cache key to `tonic-css`. Enabled CSS variables with root selector and prefix. Configured InstantSearch to preserve widget states.	+11/-2
css-theme-variables.js `Adjust CSS Theme Variables Display` packages/react-docs/pages/customization/css-theme-variables.js Adjusted CSS theme variables display format. Wrapped CSS variables in a root selector.	+16/-16
shadow-dom.js `Implement Shadow DOM with Emotion Cache` packages/react-docs/pages/customization/shadow-dom.js Implemented Shadow DOM with Emotion Cache. Created components to demonstrate Shadow DOM usage. Provided examples for Drawer, Modal, and Toast within Shadow DOM.	+418/-0
Popper.js `Use useDefaultProps Hook in Popper Component` packages/react/src/popper/Popper.js Introduced `useDefaultProps` hook for managing default props. Refactored Popper component to use `useDefaultProps`.	+5/-5

Documentation

6 files

sidebar-routes.js `Add Customization Section with New Routes` packages/react-docs/config/sidebar-routes.js Added a new "Customization" section in the sidebar. Included routes for "CSS Theme Variables" and "Shadow DOM".	+11/-1
tonic-ui-943.md `Document Popper Component Enhancement` .changeset/tonic-ui-943.md Documented the use of `useDefaultProps` hook in Popper.	+5/-0
css-theme-variables.page.mdx `Add Documentation for CSS Theme Variables` packages/react-docs/pages/customization/css-theme-variables.page.mdx Added documentation for CSS theme variables. Explained customization of variable prefix and usage in Shadow DOM.	+111/-0
shadow-dom.page.mdx `Add Documentation for Shadow DOM Integration` packages/react-docs/pages/customization/shadow-dom.page.mdx Added documentation for Shadow DOM integration. Provided examples for styling and theming within Shadow DOM.	+151/-0
index.page.mdx `Remove Outdated CSS Variables Documentation` packages/react-docs/pages/getting-started/css-variables/index.page.mdx Removed outdated CSS variables documentation.	+0/-42
index.page.mdx `Update Usage Documentation for CSS Theme Variables` packages/react-docs/pages/getting-started/usage/index.page.mdx Updated usage documentation for CSS theme variables. Clarified version-specific instructions for `createTheme`.	+9/-7

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

…Search state for future changes

codesandbox · 2024-12-01T14:40:37Z

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

changeset-bot · 2024-12-01T14:40:39Z

🦋 Changeset detected

Latest commit: 9fb9364

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tonic-ui/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codiumai-pr-agent-free · 2024-12-01T14:41:01Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 Security concerns Shadow DOM isolation: While Shadow DOM provides encapsulation, using mode: 'open' allows external JavaScript to access the shadow root. Consider if 'closed' mode would be more appropriate for security-sensitive content.
⚡ Recommended focus areas for review Memory Leak Risk The cleanup function in useEffect should also clear any event listeners and remove the shadow root itself to prevent memory leaks Error Handling The shadow DOM creation and manipulation lacks error handling for cases where DOM operations fail Code Duplication ShadowDOMContainer and NativeDOMContainer components have identical code structure and could be refactored into a single reusable component

codiumai-pr-agent-free · 2024-12-01T14:41:28Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	✅ Add error handling for Shadow DOM feature detection to ensure graceful degradation in unsupported browsers Add error handling for shadow DOM feature detection and initialization to gracefully handle browsers that don't support Shadow DOM. packages/react-docs/pages/customization/shadow-dom.js [113-116] -let shadowContainer = container.shadowRoot; -if (!shadowContainer) { - shadowContainer = container.attachShadow({ mode: 'open' }); +let shadowContainer; +try { + shadowContainer = container.shadowRoot \|\| container.attachShadow({ mode: 'open' }); +} catch (e) { + console.warn('Shadow DOM is not supported in this environment'); + return; } `[Suggestion has been applied]` Suggestion importance[1-10]: 8 Why: The suggestion adds crucial error handling for Shadow DOM support, which is important for browser compatibility and user experience. The improved code provides graceful fallback and user notification when Shadow DOM is not supported.	8
Possible issue	Add type checking to prevent runtime errors when accessing DOM elements Add a check for container existence before attempting to access or modify it to prevent potential null reference errors. packages/react-docs/pages/customization/shadow-dom.js [108-111] const container = document.querySelector('#shadow-root'); -if (!container) { +if (!container \|\| !(container instanceof HTMLElement)) { + console.error('Shadow root container not found or invalid'); return; } Apply this suggestion Suggestion importance[1-10]: 7 Why: The suggestion adds important type checking that helps prevent runtime errors by validating that the container is not only present but also of the correct type (HTMLElement). This improves code robustness and debugging.	7
General	✅ Ensure proper cleanup of resources and event listeners to prevent memory leaks Clean up event listeners and side effects in the cleanup function to prevent memory leaks. packages/react-docs/pages/customization/shadow-dom.js [157-165] return () => { - // Unmount the React component root.unmount(); - - // Remove all children of the shadow container - while (shadowContainer.firstChild) { - shadowContainer.removeChild(shadowContainer.firstChild); - } + shadowContainer?.replaceChildren(); + container.shadowRoot = null; }; `[Suggestion has been applied]` Suggestion importance[1-10]: 4 Why: While the suggestion aims to improve cleanup, the original code already handles cleanup adequately. The suggested replaceChildren() method is more concise but offers minimal practical improvement over the existing implementation.	4

💡 Need additional feedback ? start a PR chat

codesandbox-ci · 2024-12-01T14:43:58Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

codecov · 2024-12-01T14:46:40Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 78.44%. Comparing base (53fc986) to head (9fb9364).
Report is 1 commits behind head on v2.

Additional details and impacted files

@@           Coverage Diff           @@
##               v2     #950   +/-   ##
=======================================
  Coverage   78.43%   78.44%           
=======================================
  Files         406      406           
  Lines        6692     6693    +1     
=======================================
+ Hits         5249     5250    +1     
  Misses       1443     1443

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

trendmicro-frontend-bot · 2024-12-01T14:47:45Z

Tonic UI Demo

On 2024-12-04 08:05:34 +0000, PR #950 (9fb9364) was successfully deployed. You can view it at the following link:
https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-950/

…lt props

packages/react-docs/pages/customization/shadow-dom.js

…xible usage

cheton · 2024-12-04T06:37:43Z

/describe

codiumai-pr-agent-free · 2024-12-04T06:38:09Z

PR Description updated to latest commit (1626df3)

Copy walkthrough table to "Files Changed" Tab

docs: custom theme with CSS variable configuration and update Instant…

fbb0229

…Search state for future changes

cheton added the 🏗️ work in progress Work in progress label Dec 1, 2024

cheton added the Documentation label Dec 1, 2024

codiumai-pr-agent-free bot added the Review effort [1-5]: 3 label Dec 1, 2024

cheton linked an issue Dec 1, 2024 that may be closed by this pull request

Add a guide on how to use the Shadow DOM with Tonic UI #943

Closed

cheton force-pushed the tonic-ui-943 branch 2 times, most recently from 43bb419 to 1f18abb Compare December 2, 2024 04:06

feat(react/Popper): use the useDefaultProps hook for managing defau…

9a020f6

…lt props

cheton force-pushed the tonic-ui-943 branch from 1f18abb to 9b7dd45 Compare December 2, 2024 09:43

docs: shadow DOM integration

3f44d71

cheton force-pushed the tonic-ui-943 branch from 9b7dd45 to 3f44d71 Compare December 2, 2024 09:58

trendmicro-frontend deleted a comment from codiumai-pr-agent-free bot Dec 2, 2024

chore(changeset): create tonic-ui-943.md

74024b2

cheton changed the title ~~docs: Shadow DOM customization~~ docs: shadow DOM customization Dec 2, 2024

cheton force-pushed the tonic-ui-943 branch from ece28b2 to 74024b2 Compare December 2, 2024 10:04

cheton changed the title ~~docs: shadow DOM customization~~ docs: shadow DOM integration Dec 2, 2024

codiumai-pr-agent-free bot reviewed Dec 3, 2024

View reviewed changes

packages/react-docs/pages/customization/shadow-dom.js Show resolved Hide resolved

codiumai-pr-agent-free bot reviewed Dec 3, 2024

View reviewed changes

packages/react-docs/pages/customization/shadow-dom.js Outdated Show resolved Hide resolved

cheton added 2 commits December 3, 2024 11:32

refactor: refine shadow DOM cleanup logic

2be8415

docs: remove the as="p" from ParagraphComponent to allow more fle…

774f7d0

…xible usage

cheton force-pushed the tonic-ui-943 branch 3 times, most recently from 289772a to 79bcea6 Compare December 3, 2024 10:34

docs: update the "Shadow DOM" page

d54ab26

cheton force-pushed the tonic-ui-943 branch from 79bcea6 to d54ab26 Compare December 3, 2024 10:37

docs: add "CSS Theme Variables" page

53a513f

cheton force-pushed the tonic-ui-943 branch from 2416dd7 to 53a513f Compare December 4, 2024 04:13

docs: update docs

1626df3

cheton changed the title ~~docs: shadow DOM integration~~ docs: add CSS Theme Variables and Shadow DOM pages Dec 4, 2024

cheton added 3 commits December 4, 2024 14:47

docs: move "Content Security Policy" to the "Customization" section

7c20fcf

feat(react): export DefaultPropsProvider and useDefaultProps

02fbe3e

chore: update changeset files

954d132

cheton removed the 🏗️ work in progress Work in progress label Dec 4, 2024

docs: update customization pages

9fb9364

tinaClin approved these changes Dec 4, 2024

View reviewed changes

cheton merged commit edc8823 into v2 Dec 4, 2024
7 checks passed

cheton deleted the tonic-ui-943 branch December 4, 2024 10:01

github-actions bot mentioned this pull request Dec 4, 2024

chore(release): version packages #952

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add `CSS Theme Variables` and `Shadow DOM` pages #950

docs: add `CSS Theme Variables` and `Shadow DOM` pages #950

cheton commented Dec 1, 2024 •

edited

Loading

codesandbox bot commented Dec 1, 2024

changeset-bot bot commented Dec 1, 2024 •

edited

Loading

codiumai-pr-agent-free bot commented Dec 1, 2024

codiumai-pr-agent-free bot commented Dec 1, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 1, 2024 •

edited

Loading

codecov bot commented Dec 1, 2024 •

edited

Loading

trendmicro-frontend-bot commented Dec 1, 2024 •

edited

Loading

cheton commented Dec 4, 2024

codiumai-pr-agent-free bot commented Dec 4, 2024

docs: add CSS Theme Variables and Shadow DOM pages #950

docs: add CSS Theme Variables and Shadow DOM pages #950

Conversation

cheton commented Dec 1, 2024 • edited Loading

User description

Description

Changes walkthrough 📝

PR Type

Description

Changes walkthrough 📝

codesandbox bot commented Dec 1, 2024

Review or Edit in CodeSandbox

changeset-bot bot commented Dec 1, 2024 • edited Loading

🦋 Changeset detected

codiumai-pr-agent-free bot commented Dec 1, 2024

PR Reviewer Guide 🔍

codiumai-pr-agent-free bot commented Dec 1, 2024 • edited Loading

PR Code Suggestions ✨

codesandbox-ci bot commented Dec 1, 2024 • edited Loading

codecov bot commented Dec 1, 2024 • edited Loading

Codecov Report

trendmicro-frontend-bot commented Dec 1, 2024 • edited Loading

Tonic UI Demo

cheton commented Dec 4, 2024

codiumai-pr-agent-free bot commented Dec 4, 2024

docs: add `CSS Theme Variables` and `Shadow DOM` pages #950

docs: add `CSS Theme Variables` and `Shadow DOM` pages #950

cheton commented Dec 1, 2024 •

edited

Loading

changeset-bot bot commented Dec 1, 2024 •

edited

Loading

codiumai-pr-agent-free bot commented Dec 1, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 1, 2024 •

edited

Loading

codecov bot commented Dec 1, 2024 •

edited

Loading

trendmicro-frontend-bot commented Dec 1, 2024 •

edited

Loading